<template>
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in lists" :key="index" @click="select(index)">
			<image style="width: 52rpx;" :src="option==index?item.selectedIconPath:item.iconPath" mode="widthFix"></image>
			<view :class="{option:option==index}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';

	const lists=reactive([
		{
			pagePath: "pages/index/index",
			iconPath: "https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u173.svg",
			selectedIconPath: "https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u172.svg",
			text: "诊疗首页"
		},
		{
			pagePath: "pages/message_center/message_center",
			iconPath: "https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u182.svg",
			selectedIconPath: "https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u184.svg",
			text: "消息中心"
		},
		{
			pagePath: "pages/mine/mine",
			iconPath: "https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u187.svg",
			selectedIconPath: "https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u189.svg",
			text: "我的"
		}
	])
	const option=ref(0)	//选中
	
	// 点击切换
	const select=(i)=>{
		option.value=i
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		// width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-top: 2rpx solid rgba(242, 242, 242, 1);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.tab{
			width: calc(100%/3);
			text-align: center;
			cursor: pointer;
			font-family: 'ArialMT', 'Arial', sans-serif;
			font-size: 26rpx;
			color: #333;
			.option{
				color: #3D7EFF;
			}
		}
	}
</style>